<template>
  <div class="box">
    <div class="box-top number">
      {{content}}
    </div>
    <div class="box-bottom" v-if="parameter != -1">
      {{parameter}}
    </div>
  </div>
</template>
<script>

export default {
  props: {
    // 冠亚和值数据
    content: {
      type: [Number, String]
    },
    parameter: {
      type: Number,
      default: -1
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~@/assets/styles/variables'
  .box
    display: flex
    width:86px;
    height:48px;
    background:linear-gradient(0deg,rgba(238,238,238,1),rgba(255,255,255,1));
    border:1px solid rgba(219, 211, 211, 1);
    box-shadow:0px 3px 6px 0px rgba(0, 0, 0, 0.1);
    box-sizing border-box
    border-radius:4px;
    flex-direction column
    align-items center
    justify-content space-around
    cursor pointer
    .box-top 
      font-size 14px
      font-weight 400px
      width 36px 
      height 20px
      line-height 20px
      border-radius 10px
      &.number
        font-family: ArialMT
        box-sizing border-box 
        padding 0 10px
        height 20px
        line-height 20px
        text-align center
    .box-bottom
      font-family:ArialMT
      font-weight 400
      color $color-theme-red
  .box:hover
    border-color #e02828;
</style>
